<template>
  <div style="width: 100%" class="history-box">
    <div class="history-item" v-for="(item,index) in tableData" :key="item.oid">
      <div>中文名称：{{ item.nameCn }}</div>
      <div>英文名称：{{ item.nameEn }}</div>
      <div>版本：{{ item.version }}</div>
      <div v-if="item.releaseVersion" class="hostVersion">对应主版本：{{ item.releaseVersion }}</div>
      <div>修改人：{{ item.modifier }}</div>
      <div>修改时间：{{ item.modifyTime }}</div>
      <div class="history-btn">
        <el-button type="text" @click="stMain(item)" :disabled="index === 0"
          >{{ `设为主版本` }}
        </el-button>
        <el-button type="text" @click="del(item )">删除</el-button>
      </div>
    </div>

    <el-pagination
      small
      layout="prev, pager, next"
      @current-change="currentChange"
      @size-change="sizeChange"
      :total="page.total"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      title="预览页面"
      width="60%"
      :modal-append-to-body="false"
    >
      <div class="body_" v-if="visible">
        <v-form-render :formJson="json" :previewState="true"></v-form-render>
      </div>
      <div slot="footer">
        <el-button size="medium" @click="visible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/applicationManage/applicationManage";

export default {
  name: "history-box",
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      tableData: [],
      selection: [],
      loading: false,
      row: {},

      visible: false,
      json: {},
    };
  },
  props: {
    /* 当前列数据 */
    rowData: {
      type: Object,
      default: {},
    },
    reloadPage: {
      type: Function,
      default: ()=>{},
    },
  },
  methods: {
    showDetail(row) {
      this.json = JSON.parse(row.json);
      this.visible = true;
    },
    stMain(row) {
      this.$confirm(
        this.method === "history" ? "是否设为主版本" : "是否设为活动版本"
      ).then(() => {
        api[this.method + "_setMain"]({ id: row.oid }).then(() => {
          this.$message.success("设置成功");
          this.getPage();
          this.reloadPage();
          this.$emit("refresh");
        });
      });
    },
    del(row) {
      this.$confirm("是否删除").then(() => {
        api[this.method + "_del"]({ id: row.oid }).then(() => {
          this.$message.success("删除成功");
          this.getPage();
        });
      });
    },

    getPage() {
      api[this.method + "_page"](this.page.currentPage, this.page.pageSize, {
        applicationPageId: this.rowData.oid,
      }).then((res) => {
        const { totalRows, list } = res.data.data;
        this.tableData = list;
        this.page.total = totalRows;
      });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getPage();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getPage();
    },
    show() {
      this.method = "history";
      this.getPage();
    },
  },
  mounted() {
    this.show();
  },
};
</script>
<style lang="scss" scoped>

.history-box{
    box-sizing: border-box;
    padding: 20px 20px 10px 10px;
    max-height: 100%;
    overflow-y: scroll;
    .hostVersion{
      color: $--color-primary;
    }
}
.body_ {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.history-item {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  box-sizing: border-box;
  margin-bottom: 5px;
  &>div{
    margin: 5px 0;
  }
  font-size: 14px;
  .history-btn{
    text-align: right;
  }
}
 ::v-deep .el-pagination {
    text-align: right;
    padding: 18px 0;
  }
</style>